<template>
  <div class="footer">
    <!-- 文字输入 -->
    <u-editor v-model="content" placeholder="请输入内容"></u-editor>
    <!-- 表情框 -->
    <!-- <u-emoji style="margin: 0 8px 0" :emoji="emoji" placement="top-end" @add-emoji="addEmoji">
      <svg width="22" height="22" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7186">
        <path
          d="M510.944 960c-247.04 0-448-200.96-448-448s200.992-448 448-448c247.008 0 448 200.96 448 448S757.984 960 510.944 960zM510.944 128c-211.744 0-384 172.256-384 384 0 211.744 172.256 384 384 384 211.744 0 384-172.256 384-384C894.944 300.256 722.688 128 510.944 128zM512 773.344c-89.184 0-171.904-40.32-226.912-110.624-10.88-13.92-8.448-34.016 5.472-44.896 13.888-10.912 34.016-8.48 44.928 5.472 42.784 54.688 107.136 86.048 176.512 86.048 70.112 0 134.88-31.904 177.664-87.552 10.784-14.016 30.848-16.672 44.864-5.888 14.016 10.784 16.672 30.88 5.888 44.864C685.408 732.32 602.144 773.344 512 773.344zM368 515.2c-26.528 0-48-21.472-48-48l0-64c0-26.528 21.472-48 48-48s48 21.472 48 48l0 64C416 493.696 394.496 515.2 368 515.2zM656 515.2c-26.496 0-48-21.472-48-48l0-64c0-26.528 21.504-48 48-48s48 21.472 48 48l0 64C704 493.696 682.496 515.2 656 515.2z"
          p-id="7187"
        ></path>
      </svg>
    </u-emoji> -->
    <!-- 发送按钮 -->
    <u-icon
      size="18"
      :class="{ 'submit-btn': content.trim() != '' }"
      class="select-none cursor-pointer"
      @click="submit"
    >
      <svg viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15072">
        <path
          d="M1008.00076 6.285714q18.857143 13.714286 15.428571 36.571429l-146.285714 877.714286q-2.857143 16.571429-18.285714 25.714286-8 4.571429-17.714286 4.571429-6.285714 0-13.714286-2.857143l-258.857143-105.714286-138.285714 168.571429q-10.285714 13.142857-28 13.142857-7.428571 0-12.571429-2.285714-10.857143-4-17.428571-13.428571t-6.571429-20.857143l0-199.428571 493.714286-605.142857-610.857143 528.571429-225.714286-92.571429q-21.142857-8-22.857143-31.428571-1.142857-22.857143 18.285714-33.714286l950.857143-548.571429q8.571429-5.142857 18.285714-5.142857 11.428571 0 20.571429 6.285714z"
          p-id="15073"
        ></path>
      </svg>
    </u-icon>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { UEmoji, UToast } from 'undraw-ui'

const content = ref('')

const emit = defineEmits<{
  (e: 'submit', obj: any): void
}>()

const keydown = (e: Event | KeyboardEvent) => {
  const { ctrlKey, key } = e as KeyboardEvent
  if (ctrlKey && key == 'Enter') {
    //用户点击了ctrl+enter触发
    // console.log('ctrl+enter')
    submit()
  } else {
    //用户点击了enter触发
    // console.log('enter')
  }
}

const submit = () => {
  let t = content.value
  if (!t.trim()) {
    UToast({ type: 'error', message: '内容不能为空' })
  } else {
    t = t.replace(/\n/g, '<br/>')
    emit('submit', t)
  }
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  align-items: center;
  .u-editor {
    flex: 1;
  }
  div {
    margin-right: 8px;
  }
}
</style>
